<template>
  <form class="cmp cmp-send row">
    <div class="col-4">
      <fieldset>
        <legend>参数设置</legend>
        <div class="fieldset-content">
          <div class="form-group form-item-row" align="center">
            <div class="form-item-label">设备列表</div>
            <div class="form-item-input">
              <select class="form-control" v-model="deviceId">
                <option v-for="(v,i) in devicesList" :key="i" :value="v.value">{{v.label}}</option>
              </select>
            </div>
            <div class="form-item-suffix"><x-button @click="getDevicesList">刷新</x-button></div>
          </div>
          <div class="form-group form-item-row">
            <div class="form-item-label">类型</div>
            <div class="form-item-input">
              <label><input class="form-check-input" type="radio" value="file" v-model="fileType">文件</label>
              <label><input class="form-check-input" type="radio" value="url" v-model="fileType">网址</label>
            </div>
          </div>
          <div class="form-group form-item-row" align="center" v-if="fileType==='file'">
            <div class="form-item-label">文件</div>
            <div class="form-item-input"><input class="form-control" type="text" v-model="filePath" placeholder="请选择文件" readonly /></div>
            <div class="form-item-suffix"><x-button @click="setFilePath">选择</x-button></div>
          </div>
          <div class="form-group form-item-row" align="center" v-else-if="fileType==='url'">
            <div class="form-item-label">网址</div>
            <div class="form-item-input"><textarea class="form-control" v-model.trim="fileUrl" placeholder="请输入网址"></textarea></div>
          </div>
          <div class="form-group form-group-main"></div>
          <div class="form-group form-item-row" align="center">
            <x-button type="primary" block @click="sendHandler" :loading="loadingCount > 0">开始推送</x-button>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="col-8">
      <fieldset>
        <legend>视频预览</legend>
        <div class="fieldset-content">
          <video ref="video" autoplay="autoplay"></video>
        </div>
      </fieldset>
    </div>
  </form>
</template>

<script>
// const fs = global.require('fs')
// const path = global.require('path')
const {remote} = global.require('electron')
const {dialog} = remote
const selfWindow= remote.getCurrentWindow()
let Browser = global.nodecastJs || null

export default {
  name: 'send',
  data () {
    return {
      fileType: 'url',
      filePath: '',
      fileUrl: '',
      deviceId: '',
      devicesList: [],
      browser: null,
      browserTimer: null,
      loadingCount: 0,
    }
  },
  mounted () {
    this.getDevicesList()
  },
  beforeDestroy () {
    clearTimeout(this.browserTimer)
    this.browser && this.browser.destroy()
  },
  methods: {
    // 获取设备列表
    getDevicesList () {
      let timestamp = 60 // in seconds
      this.browser = new Browser()
      this.browser.onDevice((device) => {
        device.onError((err) => {
          this.$toast(err)
        })
        this.devicesList = this.browser.getList()
        this.fileUrl && device.play(this.fileUrl, timestamp)
      })
      this.browser.start()
      this.browserTimer = setTimeout(() => {
        this.browser.destroy()
        this.browser = null
      }, 20000)
    },
    // 选择主图
    setFilePath () {
      let filePaths = dialog.showOpenDialogSync(selfWindow, {
        title: '选择文件',
        buttonLabel:'确定',
        defaultPath: this.$sharedObject('desktopPath'),
        properties: ['openFile']
      })
      if (filePaths instanceof Array && filePaths.length > 0) {
        this.filePath = filePaths[0]
        this.loadingCount++
      }
    },
    // 推送文件或网址
    sendHandler () {
      if (!this.checkForm()) return
    },
    // 表单校验
    checkForm () {
      let result = true
      if (this.fileType === 'file' && !this.filePath) {
        result = false
        this.$toast('请选择文件')
      }
      if (this.fileType === 'url' && !this.fileUrl) {
        result = false
        this.$toast('请输入网址')
      }
      return result
    },
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.form-item-row {
  display: flex;
  .form-item-label {
    min-width: 4em;
    margin-right: .5em;
    text-align-last: justify;
  }
  .form-item-input {
    width: 0;
    flex-grow: 1;
    text-align: left;
  }
  .form-item-suffix {
    margin-left: .5em;
    min-width: 2em;
  }
  &[align="center"] {
    align-items: center;
  }
}
.cmp-send {
  height: 100%;
  fieldset {
    height: 100%;
    .fieldset-content {
      height: calc(100% - 2em);
      display: flex;
      flex-direction: column;
      video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-color: #333;
      }
      .form-group-main {
        height: 0;
        flex-grow: 1;
      }
    }
  }
}
</style>
